* {
  padding: 0;
  margin: 0;
}

#TOAST_WRAP {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.TOAST_CONTAINER {
  position: relative;
  width: 100%;
  flex: 1;
}

.TOAST {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), /* 更缓入缓出的贝塞尔曲线 */
              top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, top;
}

.TOAST_TEXT {
  position: relative;
  max-width: 80%; /* 最大宽度为视口的80% */
  width: fit-content; /* 关键属性：使宽度自适应内容 */
  box-sizing: border-box;
  margin: auto;
  line-height: 1.5;
  border-radius: 4px;
  padding: 12px 20px;
}

.TOAST.ACTIVE {
  opacity: 1;
}

.TOAST.PRIMARY .TOAST_TEXT {
  background-color: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(0, 0, 0, .42);
  color: #fff;
}
.TOAST.INFO .TOAST_TEXT {
  background-color: #e6f4ff;
  border: 1px solid #91caff;
  color: #4096ff;
}
.TOAST.SUCCESS .TOAST_TEXT {
  background-color: #f0f9eb;
  border: 1px solid #e1f3d8;
  color: #67c23a;
}
.TOAST.WARNING .TOAST_TEXT {
  background-color: #fdf6ec;
  border: 1px solid #faecd8;
  color: #e6a23c;
}
.TOAST.ERROR .TOAST_TEXT {
  background-color: #fef0f0;
  border: 1px solid #fde2e2;
  color: #f56c6c;
}